/*
 * @Author: wangguanqing 
 * @Date: 2018-05-19 11:42:56 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-21 15:45:26
 */

<template>
<bg-lay-out>
  <div slot="headerText">房联行数据中心</div>
  <div slot="main">
    <div class="myMainClass">
    <div class="changeTop marginTop-20">
      <sel-time @onChangeTime="changeTimeScope"></sel-time>
      <area-or-shop @onChangeAreaOrShop="onChangeAreaOrShop"></area-or-shop>
    </div>
      <div class="rowCon">
        <el-row class="rowConIn">
          <div class="chartView">
            <!-- 报表选项 -->
            <div class="chartViewOption">
              <el-radio-group @change="fetchData" class="radioCon radioBack" v-model="tabDefault">
                <el-radio-button style="color:#fff" :label="'18003'">房源</el-radio-button>
                <el-radio-button style="color:#fff" :label="'18004'">客源</el-radio-button>
                <el-radio-button style="color:#fff" :label="'18034'">带看</el-radio-button>
                <el-radio-button style="color:#fff" :label="'18033'">实勘</el-radio-button>
              </el-radio-group>
            </div>
            <!-- 展示信息 -->
            <div class="chartViewText">
              <el-row :gutter="66" class="rowCell" style="margin-left:50px;margin-right:50px">
                <el-col v-for="(item,id) in houseTop" :key="id" :style="{width: String(100/houseTop.length) +'%',paddingLeft: (id+1)%3 == 0 ? '0':'33px', paddingRight: (id+3)%3 == 0 ? '0':'33px'}" style="text-align: center;">
                  <div class="rowItem">
                    <div class="rowItemTitle" :style="{marginTop: item.type == 0 ?'10px':'0',fontSize: item.type == 0 ? '26px':'20px',color: item.type == 0 ? '#fff':'#ccc'}">{{item.name}}</div>
                    <div class="rowItemVal"  :style="{fontWeight: item.type ==0 ? 'bold':'normal',color:item.color,fontSize:item.type == 0 ?'44px':'28px'}">
                      {{item.val}}
                    </div>
                    <div class="rowItemVal" :style="{color: tabDefault === '18003'||'18004' ? item.color :'#0b9afc',marginTop: item.type == 0 ? '0':'20px',fontWeight: item.type ==0 ? 'bold':'normal',fontSize:item.type == 0 ?'44px':'28px'}">
                      {{item.comparVal}}
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row class="selectRow">
              <el-select @change="changeSel" v-model="value" placeholder="请选择">
                <el-option v-for="item in optionArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-row>
            <!-- 报表线性图 -->
            <chart :chartStyle="'min-width:50rem;'"  :option="transactionStatisticOption"/>
          </div>
          <!-- 表格 table up list -->
          <div class="tableView">
            <el-row>
              <div class="workAnalysis">
                <div class="myTable">
                  <el-table
                      :row-class-name="rowClassName"
                      :row-style="{background:'transparent'}"
                      :cell-style="{background:'transparent',border:0}"
                      :header-row-style="{background:'transparent',color:'#2ff0d2'}"
                      :header-cell-style="{background:'transparent',borderBottom:'1px solid rgba(47, 240, 210,0.5)',borderRight:'0px',}"
                      style="width: 100%;border-bottom:0;color:#2ff0d2;font-size:18px"
                      v-if="isFirstTwoTab"
                      :data="firstTabTable"  
                      height="421">
                    <el-table-column label="区域" prop="name" align="center">
                    </el-table-column>
                    <el-table-column label="新增房源">
                      <el-table-column label="出租" prop="incrementForRent"  width="100">
                      </el-table-column>
                      <el-table-column prop="incrementForSell" label="出售"  width="100">
                      </el-table-column>
                      <el-table-column prop="increment" label="合计">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="成交套数">
                      <el-table-column label="出租" prop="dealForRent" width="100">
                      </el-table-column>
                      <el-table-column prop="dealForSell" label="出售" width="100">
                      </el-table-column>
                      <el-table-column prop="deal" label="合计" >
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="房源跟进">
                      <el-table-column label="出租" prop="followUpForRent"  width="100">
                      </el-table-column>
                      <el-table-column prop="followUpForSell" label="出售" width="100">
                      </el-table-column>
                      <el-table-column prop="followUp" label="合计" >
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                  <el-table 
                  v-show="!isFirstTwoTab && !shikan" 
                  :data="lastTabTable" 
                  :row-style="{background:'transparent'}"
                  :cell-style="{background:'transparent',border:0}"
                  :header-row-style="{background:'transparent',color:'#2ff0d2'}"
                  :header-cell-style="{background:'transparent',borderBottom:'1px solid rgba(47, 240, 210,0.5)'}"
                  style="width: 100%;border-bottom:0;color:#2ff0d2;font-size:18px"
                  >
                    <el-table-column label="区域" prop="name"  width="200">
                    </el-table-column>
                    <el-table-column label="求租" prop="value1"  width="200">
                    </el-table-column>
                    <el-table-column label="求购" prop="value2"  width="200">
                    </el-table-column>
                    <el-table-column label="带看百分率" prop="value3"  width="200">
                    </el-table-column>
                  </el-table>
                  <el-table 
                  v-show="!isFirstTwoTab && shikan"  
                  :data="lastTabTable" 
                  :row-style="{background:'transparent'}"
                  :cell-style="{background:'transparent',border:0}"
                  :header-row-style="{background:'transparent',color:'#2ff0d2'}"
                  :header-cell-style="{background:'transparent',borderBottom:'1px solid rgba(47, 240, 210,0.5)'}"
                  style="width: 100%;border-bottom:0;color:#2ff0d2;font-size:18px">
                    <el-table-column label="区域" prop="name"  width="200">
                    </el-table-column>
                    <el-table-column label="出租" prop="value1"  width="200">
                    </el-table-column>
                    <el-table-column label="出售" prop="value2"  width="200">
                    </el-table-column>
                  </el-table>
                </div>
            </div>
            </el-row>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</bg-lay-out>
</template>
<script>
import chartLayOut from "@/components/Charts/chartLayOut";
import chart from "../../../../components/Charts/newChart";
import {
  GetDataByTargetForTwo,
  GetWorkloadSummary,
  GetDoubleDetailList,
  GetWorkloadDetail,
  GetDetailNew
} from "../../../../api/flh/home";
import selTime from "@/components/branch/selTime";
import areaOrShop from "@/components/branch/areaOrShop";
import bgLayOut from "@/components/bgLayOut/index";
import selTopTime from "@/components/flh/selTime";
const lineCircle2 =
  "";
export default {
  components: {
    chart,
    selTime,
    areaOrShop,
    bgLayOut,
    selTopTime,
    chartLayOut
  },
  data() {
    return {
      cityId: 0,
      value: "",
      datas: {}, // 数据集
      shikan: false, // 是否为实勘
      areaArr: [{ id: "0", name: "全部区域" }], // 区域数组
      storeArr: [], // 门店数组
      lineObj: {
        // 折线图基础数据
        xData: [],
        data: []
      },
      firstTabTable: [],
      lastTabTable: [],
      isFirstTwoTab: true,
      demandType: "",
      queryType: "", // 带看
      tradeType: "", // 实勘
      optionArr: [], // sel选择
      compare: false, // 是否对比
      time: [], // 时间
      compareTime: [], // 对比时间
      districtId: "", // 区域id
      storeId: "", // 门店id
      tabDefault: "18003", // 选择的tab标签
      houseTop: [], // 房源
      custormerTop: [], // 客源
      lookTop: [], // 带看
      solidTop: [], // 实勘
      startTime: "",
      endTime: "",
      propertiesAnalysisOption: {}, // 房源成交收入
      transactionStatisticOption: {} // 户型成交统计
    };
  },
  methods: {
    rowClassName(row) {},
    formatterLine(res, params, unit) {
      var minResult = "";
      params.forEach(item => {
        var minItem =
          "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
          item.seriesName +
          "</span><span style='margin-top:2px;font-family:DIN Condensed Bold;font-size:20px'>" +
          item.value +
          "</span></div>";
        minResult += minItem;
      });
      var imgConStart =
        "<div style='display:flex;padding:12pt 12pt 12pt 12pt;color:#31cee6;flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px'>" +
        "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt'>";

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    tableRowClassName(row, index) {
      return "rowClassName";
    },
    // 对比时间获取top Cell
    async fetchCompare() {
      var res
      var self = this;
      var params = {
        startTime: this.compareTime[0],
        endTime: this.compareTime[1],
        areaId: this.districtId,
        storeId: this.storeId,
        queryType: this.tabDefault,
        timeType: ""
      };

      try {
        if (this.tabDefault === "18003" || this.tabDefault === "18004") {
          res = await GetWorkloadSummary(params);
        } else {
          res = await GetDataByTargetForTwo(params);
        }
        var data = res.data.result;
        var houseTopArr = []
        if (this.tabDefault === "18003") {
          houseTopArr = [
            data.increment,
            data.incrementForRent,
            data.incrementForSell,
            data.deal,
            data.dealForRent,
            data.dealForSell,
            data.followUp,
            data.followUpForRent,
            data.followUpForSell
          ];
          this.$set(this, "houseTop", houseTopArr);
          this.fetchLineData();
        } else if (this.tabDefault === "18004") {
          // 客源
          houseTopArr = [
            data.increment,
            data.incrementForRent,
            data.incrementForSell,
            data.deal,
            data.dealForRent,
            data.dealForSell,
            data.followUp,
            data.followUpForRent,
            data.followUpForSell
          ];
          this.$set(this, "houseTop", houseTopArr);
          this.fetchLineData();
        } else if (this.tabDefault === "18034") {
          // 带看
          this.houseTop.forEach((item, id) => {
            data.list.forEach(aa => {
              if (item.name === aa.name) {
                if (item.name === "带看率") {
                  item.comparVal = aa.percent + "%";
                } else {
                  item.comparVal = Number(aa.percent).toFixed(0);
                }
              }
            });
          });
          this.fetchLineData();
        } else {
          // 实勘
          self.houseTop.forEach((item, id) => {
            if (item.name === "实勘总量") {
              item.comparVal = data.total;
            }
            data.list.forEach(aa => {
              if (item.name === aa.name) {
                item.comparVal = aa.value;
              }
            });
          });
          this.fetchLineData();
        }
        // this.fetchPieChart(pieArr)
        // 获取table 数据
        if (this.tabDefault === "18003" || this.tabDefault === "18004") {
          this.getFirstTabTable();
        } else {
          this.getLastTabTable();
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 前两个的tab
    async getFirstTabTable() {
      var params = {
        startTime: this.time[0],
        endTime: this.time[1],
        queryType: this.tabDefault
      };
      try {
        var res = await GetWorkloadDetail(params);
        this.$set(this, "firstTabTable", res.data.result);
        this.$set(this, "isFirstTwoTab", true);
      } catch (e) {
        console.log(e);
      }
    },
    // 后两个的tabPOST =
    async getLastTabTable() {
      var params = {
        startTime: this.time[0],
        endTime: this.time[1],
        queryType: ""
      };
      if (this.tabDefault === "18034") {
        params.queryType = "22008";
      } else {
        params.queryType = "22007";
      }
      try {
        var res = await GetDetailNew(params);
        var resData = res.data.result;
        if (this.tabDefault === "18034") {
          resData.forEach(item => {
            item.value3 + "%";
          });
          this.$set(this, "shikan", false);
        } else {
          this.$set(this, "shikan", true);
        }
        this.$set(this, "lastTabTable", resData);
        this.$set(this, "isFirstTwoTab", false);
      } catch (e) {
        console.log(e);
      }
    },
    changeSel(res) {
      if (this.tabDefault === "18003" || this.tabDefault === "18004") {
        this.queryType = res;
      } else if (this.tabDefault === "18034") {
        // 带看
        this.queryType = "18032";
        this.demandType = res;
      } else {
        // 实勘
        this.queryType = "18033";
        this.tradeType = res;
      }
      this.fetchLineData(res);
    },
    async fetchLineData() {
      var params = {
        startTime: this.time[0],
        endTime: this.time[1],
        areaId: this.districtId,
        storeId: this.storeId,
        queryType: this.queryType,
        timeType: "",
        tradeType: this.tradeType,
        demandType: this.demandType
      };
      if (this.tabDefault === "18003" || this.tabDefault === "18004") {
        params.tradeType = "";
        params.demandType = "";
      } else if (this.tabDefault === "18034") {
        params.tradeType = "";
      } else {
        params.demandType = "";
      }
      if (this.compare) {
        var compareParams = JSON.parse(JSON.stringify(params));
        compareParams.startTime = this.compareTime[0];
        compareParams.endTime = this.compareTime[1];
      }
      try {
        var result = await GetDoubleDetailList(params);
        var res = result.data.result;
        if (this.compare) {
          var comparResult = await GetDoubleDetailList(compareParams);
          var comparRes = comparResult.data.result;
        }
        this.initTransactionStatisticChart(res, comparRes);
      } catch (e) {
        console.log(e);
      }
    },
    initTransactionStatisticChart(res, comparResult) {
      var xData = [];
      var allData = [];
      var legend = [];
      var unit = "";
      var data1 = {
        data: [],
        name: this.time[0] + "-" + this.time[1],
        type: "line",
        smooth: true,
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(141,76,253,0.5)" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(141,76,253,0)" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        symbol: "image://" + lineCircle2,
        barWidth: 20
      };
      var data2 = {
        data: [],
        name: this.compareTime[0] + "-" + this.compareTime[1],
        type: "line",
        smooth: true,
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(141,76,253,0.5)" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(141,76,253,0)" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        symbol: "image://" + lineCircle2,
        barWidth: 20
      };
      var self = this;
      var time =
        this.time[0].replace(/-/g, "/") + "-" + this.time[1].replace("-", "/");
      if (this.compare) {
        var compareTime =
          this.compareTime[0].replace(/-/g, "/") +
          "-" +
          this.compareTime[1].replace(/-/g, "/");
      }
      switch (this.tabDefault) {
        case "18003":
          legend.push(time + "  房源");
          if (self.compare) {
            legend.push(compareTime + "  房源");
          }
          break;
        case "18004":
          legend.push(time + "  客源");
          if (self.compare) {
            legend.push(compareTime + "  客源");
          }
          break;
        case "18034":
          legend.push(time + "  带看");
          if (self.compare) {
            legend.push(compareTime + "  带看");
          }
          break;
        default:
          legend.push(time + "  实勘");
          if (self.compare) {
            legend.push(compareTime + "  实勘");
          }
          break;
      }
      res.forEach(cc => {
        xData.push(cc.xData1);
        data1.data.push(cc.value);
      });
      allData.push(data1);
      if (this.compare) {
        comparResult.forEach(cc => {
          data2.data.push(cc.value);
        });
        allData.push(data2);
      }
      var legendItem = [
        this.time[0] + "-" + this.time[1],
        this.compareTime[0] + "-" + this.compareTime[1]
      ];
      legendItem.forEach(aa => {
        var obj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        obj.name = aa;
        legend.push(obj);
      });
      var option = {
        dataZoom: [
          {
            bottom: 45,
            left: 80,
            width: 1650
          }
        ],
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 0,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        legend: {
          data: legend,
          right: "center",
          orient: "vertical",
          top: "5%"
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterLine(res, params, unit)
        },
        grid: {
          width: "82%",
          left: "10%",
          bottom: "20%"
        },
        series: allData
      };
      this.$set(this, "transactionStatisticOption", option);
    },
    // 饼图
    fetchPieChart(res) {
      var xData = [];
      res.forEach(item => {
        item.type = "pie";
        xData.push(item.name);
      });
      this.initPropertiesAnalysisOptionChart(res, xData);
    },
    // 饼图
    initPropertiesAnalysisOptionChart(data, xData) {
      var initData = {
        // 需要给我传的数据
        yData: [data],
        legendObj: {
          data: xData,
          bottom: 10
        },
        refName: "propertiesAnalysis",
        returnOption: "propertiesAnalysisOption",
        textColor: "black",
        radius: ["40%", "60%"],
        center: ["50%", "50%"],
        label: {
          normal: {
            position: "outside",
            formatter: "{b}\n{d}% \n{c}\r ",
            fontSize: 15
          }
        },
        seriesCenter: [
          {
            name: "白",
            type: "pie",
            clockWise: true,
            hoverAnimation: false,
            radius: [100, 100],
            label: {
              normal: {
                position: "center"
              }
            }
          }
        ]
      };
      this.forEachFun(initData);
    },
    // 房源
    async fetchHouseNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.time[0],
        endTime: this.time[1],
        areaId: this.districtId,
        storeId: this.storeId,
        queryType: this.tabDefault,
        timeType: ""
      };
      var res
      try {
        if (this.tabDefault === "18003" || this.tabDefault === "18004") {
          // 房源客源
          res = await GetWorkloadSummary(params);
        } else {
          res = await GetDataByTargetForTwo(params);
        }
        // var res = await GetWorkloadSummary(params);
        var arr = [];
        this.$set(this, "datas", res.data.result);
        // var data = res.data.result;
        if (this.tabDefault === "18003") {
          this.optionArr = [
            { value: "18003", label: "增量" },
            { value: "18005", label: "成交" },
            { value: "18030", label: "跟进" }
          ];
          var rent = "出租房源";
          var sell = "出售房源";
          arr = [
            {
              name: "新增房源",
              type: 0,
              val: this.datas.increment,
              color: "#ff9933"
            },
            {
              name: rent,
              val: this.datas.incrementForRent,
              color: "#ff9933"
            },
            {
              name: sell,
              val: this.datas.incrementForSell,
              color: "#ff9933"
            },
            {
              name: "成交套数",
              type: 0,
              val: this.datas.deal,
              color: "#22b573"
            },
            {
              name: rent,
              val: this.datas.dealForRent,
              color: "#22b573"
            },
            {
              name: sell,
              val: this.datas.dealForSell,
              color: "#22b573"
            },
            {
              name: "房源跟进",
              type: 0,
              val: this.datas.followUp,
              color: "#ed1e79"
            },
            {
              name: rent,
              val: this.datas.followUpForRent,
              color: "#ed1e79"
            },
            {
              name: sell,
              val: this.datas.followUpForSell,
              color: "#ed1e79"
            }
          ];
          this.value = "18003";
          this.queryType = "18003";
          this.fetchLineData("18003");
        } else if (this.tabDefault === "18004") {
          // 客源
          this.optionArr = [
            { value: "18004", label: "增量" },
            { value: "18005", label: "成交" },
            { value: "18031", label: "跟进" }
          ];
          arr = [
            {
              name: "新增客源",
              type: 0,
              val: this.datas.increment,
              color: "#ff9933"
            },
            {
              name: "求租客源",
              val: this.datas.incrementForRent,
              color: "#ff9933"
            },
            {
              name: "求购客源",
              val: this.datas.incrementForSell,
              color: "#ff9933"
            },
            {
              name: "成交客源总数",
              type: 0,
              val: this.datas.deal,
              color: "#22b573"
            },
            {
              name: "求租客源",
              val: this.datas.dealForRent,
              color: "#22b573"
            },
            {
              name: "求购客源",
              val: this.datas.dealForSell,
              color: "#22b573"
            },
            {
              name: "客源跟进",
              type: 0,
              val: this.datas.followUp,
              color: "#ed1e79"
            },
            {
              name: "求租客源",
              val: this.datas.followUpForRent,
              color: "#ed1e79"
            },
            {
              name: "求购客源",
              val: this.datas.followUpForSell,
              color: "#ed1e79"
            }
          ];
          this.value = "18004";
          this.queryType = "18004";
          this.fetchLineData("18004");
        } else if (this.tabDefault === "18034") {
          // 带看
          this.optionArr = [
            { value: "", label: "总量" },
            { value: "6", label: "出租" }, // 求租房
            { value: "7", label: "出售" } // 求购
          ];
          this.value = "";
          this.datas.list.forEach(item => {
            var obj = {};
            obj.name = item.name;
            obj.color = "#ff9933";
            if (obj.name.indexOf("率") >= 0) {
              obj.val = item.percent + "%";
              obj.type = 0;
            } else if (obj.name.indexOf("总数") >= 0) {
              obj.val = Number(item.percent).toFixed(0);
              obj.type = 0;
            } else {
              obj.val = Number(item.percent).toFixed(0);
            }
            arr.unshift(obj);
          });
          this.queryType = "18032";
          this.demandType = "";
          this.fetchLineData("18032");
        } else {
          // 实勘
          this.optionArr = [
            { value: "", label: "总量" },
            { value: "1", label: "求租" }, // 求租房
            { value: "2", label: "求购" }, // 求购
            { value: "3", label: "租售" }
          ];
          arr = [
            {
              name: "实勘总量",
              type: 0,
              color: "#ff9933",
              val: this.datas.total
            }
          ];
          this.datas.list.forEach(item => {
            var obj = {};
            obj.name = item.name;
            obj.color = "#ff9933";
            obj.val = item.value;
            var pieObj = {};
            pieObj.name = item.name;
            pieObj.value = item.value;
            // pieArr.push(pieObj);
            arr.push(obj);
          });
          this.value = "";
          this.queryType = "18033";
          this.demandType = "";
          this.fetchLineData();
        }
        this.$set(this, "houseTop", arr);
        // this.fetchPieChart(pieArr)
        // 获取table 数据
        if (this.tabDefault === "18003" || this.tabDefault === "18004") {
          this.getFirstTabTable();
        } else {
          this.getLastTabTable();
        }
        if (this.compare) {
          this.fetchCompare();
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 选择区域、门店
    onChangeAreaOrShop(res) {
      this.districtId = res.areaId;
      this.storeId = res.shopId;
      this.fetchData();
    },
    // 改变时间
    changeTimeScope(res) {
      if (Object.keys(res).length === 1) {
        // 一个时间
        this.compare = false;
        this.time = res.time;
        this.fetchData();
      } else {
        // 对比时间
        this.compare = true;
        this.compareTime = res.compareTime;
        this.fetchData();
      }
    },
    forEachFun(initData) {
      // 处理数据生成Option
      var option = this.$utils.returnItemSeries(initData);
      this.$set(this, initData.returnOption, option);
      var self = this;
      setTimeout(function() {
        if (self.$refs[initData.refName][0]) {
          self.$refs[initData.refName][0].initChart();
        } else {
          self.$refs[initData.refName].initChart();
        }
      }, 0);
    },
    // 获取数据
    fetchData() {
      this.fetchHouseNum(); // 房源
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>
<style>
.rowClassName {
  background: red;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  color: #2ff0d2;
}
.workAnalysis .is-scrolling-none {
  height: 245px !important;
  margin-top: 25px;
}
.workAnalysis .el-table thead.is-group th {
  background: transparent;
}
.workAnalysis .el-table--border th.gutter:last-of-type {
  border-color: transparent;
}
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.marginTop-20 {
  margin-top: 20px;
}
.myTable .el-table,
.el-table__expanded-cell {
  background: transparent;
}
.myTable .el-table--enable-row-hover .el-table__body tr:hover > td {
  color: #2ff0d2;
}
.myMainClass {
  width: 100%;
}
.myMainClass .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: none;
}
.myMainClass .el-radio-button__inner {
  border: none;
  color: #1776fd;
}
.myMainClass .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;
}
.myMainClass .el-table--border,
.el-table--group {
  border: none;
}

.areaCon {
  color: white;
  margin-left: 1em;
}

.rowCon {
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

.rowConIn {
  width: 100%;
  background-image: none;
}
.rowConIn .chartView {
  width: 100%;
  margin-bottom: 20px;
  @include moduleBg(bg_1813x792);
}
.rowConIn .tableView {
  width: 100%;
  margin-bottom: 20px + 20;
  @include moduleBg(bg_1812x433);
}

.rowCell {
  @include flex-ic;
  @include border(1px, rgba(#31cee6, 0.5), bottom);
}
.rowItem {
  width: 100%;
  padding: 1em 0;
  background: transparent;
  border-right: none;
}

.rowItemTitle {
  margin-top: 0 !important;
  margin-bottom: 10px;
  color: #31cee6 !important;
  font-size: 1.5em;
  vertical-align: middle;
}

.rowItemVal {
  @include din(2em);
  color: #31cee6 !important;
  vertical-align: middle;
}
</style>
<style lang="scss">
@import "../../../../styles/base/_parameters";

.myMainClass .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;
}

.el-select-dropdown__item {
  padding: 0 10px;
}
.el-select-dropdown__item.selected {
  color: #ffffff;
  background-color: rgba(#000, 0.5);
}
.el-select-dropdown__item.selected.hover {
  background-color: #fff;
  color: black;
}
.el-input.is-disabled .el-input__inner {
  background: none;
}
.myMainClass .el-input__inner {
  border: 1px solid rgba(#31cee6, 0.5) !important;
  color: #31cee6 !important;
  background: none;
}
.myMainClass .el-select .el-input .el-select__caret {
  color: #1776fd;
}
.myMainClass .el-date-editor .el-range__icon {
  margin-left: 10px;
  color: #31cee6;
}
.myMainClass .el-date-editor .el-range-input {
  color: #31cee6 !important;
}
.myMainClass .el-date-editor .el-range-separator {
  color: #1776fd;
}
.myMainClass .el-radio-button__inner {
  background: none;
  border: none;
  color: #31cee6;
}
.myButton,
.el-checkbox__label {
  color: #31cee6 !important;
}
.el-checkbox__inner {
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid #31cee6;
}
.changeTop {
  padding: 70px 40px;
  @include moduleBg(bg_1812x433);
}
.changeTop div {
  padding: 0 !important;
  margin-bottom: 5px;
  background: transparent !important;
}
.changeTop .bigTitleCon [role="radiogroup"] {
  border-color: rgba(#31cee6, 0.5) !important;
}
.changeTop .bigTitleCon b {
  color: #31cee6 !important;
  font-size: 16px;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #000 !important;
  background-color: #31cee6;
  border-color: #31cee6;
}
/* .changeTop .el-date-editor .el-range__close-icon {
  margin-top: -41px;
} */
.el-checkbox {
  margin-right: 1em;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: transparent;
  border-color: #31cee6;
}
.el-checkbox__inner::after {
  border-color: #31cee6 !important;
}
.chartViewOption {
  display: flex;
  /* justify-content: space-around; */
  margin-left: 105px;
  padding-top: 60px;
  padding-bottom: 30px;
}

.changeCen-right-tableData {
  padding: 60px;
}
.changeCen-right-tableData-content {
  position: relative;
}
.changeCen-right-tableData-content:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 1px;
  height: 418px;
  background-color: rgba(#2ff0d2, 0.3);
}
.changeCen-right-tableData-contentUp {
  position: relative;
}
.changeCen-right-tableData-contentUp .menu {
  display: flex;
  align-items: center;
  color: #2ff0d2;
  @include border(1px, rgba(#2ff0d2, 0.3), bottom);
}
.changeCen-right-tableData-contentUp .menu > div {
  width: calc(100% / 4);
  font-size: 18px;
}
.changeCen-right-tableData-contentUp .menu .main_menu .vice_menu {
  display: flex;
  margin-top: 10px;
}
.changeCen-right-tableData-contentUp .menu .main_menu .vice_menu span {
  width: calc(100% / 3);
  height: initial;
  line-height: initial;
  text-align: left;
}

.changeCen-right-tableData-content-list_menu {
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.changeCen-right-tableData-content-list_menu:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 1px;
  height: 488px;
  background-color: rgba(#2ff0d2, 0.3);
}
.changeCen-right-tableData-content-list_menu li {
  display: flex;
}
.changeCen-right-tableData-content-list_menu li p {
  display: flex;
  align-items: center;
  width: calc(100% / 4);
  height: 62px;
  line-height: 62px;
  margin-top: 0;
  margin-bottom: 0;
  color: #2ff0d2;
  font-size: 18px;
}
.changeCen-right-tableData-content-list_menu li p span {
  text-align: left;
}

.changeCen-right-tableData-content-list_menu li span {
  width: calc(100% / 3) !important;
  height: initial !important;
  line-height: initial !important;
  color: #2ff0d2;
}

.changeCen-right-tableData-content > p {
  display: flex;
  margin-top: 40px;
  margin-bottom: 0;
  color: #2ff0d2;
  font-size: 18px;
  @include border(1px, rgba(#2ff0d2, 0.3), bottom);
}
.changeCen-right-tableData-content p span {
  width: calc(100% / 5);
  height: 62px;
  line-height: 62px;
  text-align: center;
}
.changeCen-right-tableData-content-list {
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.changeCen-right-tableData-content-list li {
  display: flex;
  margin-bottom: 34px;
  color: #2ff0d2;
  font-size: 18px;
}
.changeCen-right-tableData-content-list li span {
  width: calc(100% / 5);
  text-align: center;
}
.selectRow {
  @include flex-je;
  margin: 20px 50px 0px;
}
</style>